<template>
	<view>
		<view class="d-flex uploadImgBox">
			<view class="imageBox" v-for="(item,index) in imgArr" :key="index">
				<view class="close" @click.stop="delBefore(item,index)" v-if="!hideDel">
					删除
				</view>
				<image :src="useQimg(item)" mode="aspectFill" @click="seeImg(index)" />
			</view>
			<view class="add" @click="pushImgs" v-show="imgArr.length<max" v-if="!hideUp">
				<view>
					＋
				</view>
				<view>
					上传图片
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import useQimg from "../../hooks/qimg.js"
	import { toast, noNull } from "../../common/func.js"
	import { ref, reactive, onMounted } from "vue"
	let emit = defineEmits(['change', 'delBefore'])
	let props = defineProps({
		hideDel: {
			type: Boolean,
			default: false
		},
		hideUp: {
			type: Boolean,
			default: false
		},
		urls: {
			type: String,
			default: ""
		},
		max: {
			type: Number,
			default: 9
		},
		images: {
			type: Array,
			default () {
				return [];
			}
		}
	})
	let imgArr = ref([])

	const delBefore = (data, index) => {
		emit('delBefore', {
			url: data,
			index
		})
	}
	const deleteImg = (index) => {
		imgArr.value.splice(index, 1)
		emit('change', imgArr.value)
	}
	const seeImg = (index) => {
		let arrs = []
		imgArr.value.map(item => {
			arrs.push(useQimg(item))
		})
		uni.previewImage({
			urls: arrs,
			count: index
		})
	}
	const pushImgs = () => {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				const tempFilePaths = res.tempFilePaths;

				uni.showLoading({
					title: "正在上传..."
				})
				let header = ''
				if (tempFilePaths[0].indexOf('wxfile') == -1) {
					header = {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}
				if (!props.urls) {
					toast('您还未填写路径')
					return
				}
				uni.uploadFile({
					url: props.urls, //post请求的地址
					filePath: tempFilePaths[0],
					name: 'img',
					header: header,
					formData: {
						img: tempFilePaths[0] //formData是指除了图片以外，额外加的字段
					},
					success: (uploadFileRes) => {
						//这里要注意，uploadFileRes.data是个String类型，要转对象的话需要JSON.parse一下
						let uploadData = JSON.parse(uploadFileRes.data);
						if (uploadData.errno == 0) {
							toast('上传成功', 1)
							imgArr.value.push(uploadData.obj.resourceKey)
							if (imgArr.value.length > props.max) {
								imgArr.value = imgArr.value.slice(0, props.max)
							}
							emit('change', imgArr.value)
						} else {
							uni.showToast(uploadData.error)
						}
					}
				})
			}
		})
	}


	onMounted(() => {
		imgArr.value = [...props.images]
	})
</script>


<style lang="scss" scoped>
	.uploadImgBox {
		.add {
			margin: 10rpx 0;
			font-size: 28rpx;
			color: #CCCCCC;
			line-height: 30rpx;
			text-align: center;
			border: 5rpx dashed #CCCCCC;
			width: 150rpx;
			height: 150rpx;
			border-radius: 10rpx;

			>view:nth-child(1) {
				@include fz(80, false, 80);
			}
		}

		.imageBox {
			margin: 10rpx;
			position: relative;

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}

			.close {
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				background: rgba(250, 53, 52, .9);
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 35rpx;
				text-align: center;
				width: 60rpx;
				height: 35rpx;
			}


		}
	}
</style>
